<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-07-03 17:57:02
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-07-04 16:32:04
 * @Description: 自定义顶部Bar 包括状态栏和标题栏

 具名插槽 statusBar
 具名插槽 titleBar

 * @FilePath: \charging-mini\src\components\HeaderBar.vue
-->
<template>
    <div class="header-container">
        <div class="status-bar" :style="{ height: statusBarHeight + 'px' }">
            <slot name="statusBar"></slot>
        </div>
        <div class="title-bar" :style="{ height: titleBarHeight + 'px', paddingLeft: isAlipay ? '80rpx' : '' }">
            <slot name="titleBar"></slot>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isAlipay: false,
            statusBarHeight: "",
            titleBarHeight: "",
        };
    },
    mounted() {
        let systemInfo = uni.getSystemInfoSync();
        console.log(systemInfo);
        let { statusBarHeight, titleBarHeight, app } = systemInfo;
        this.statusBarHeight = statusBarHeight;
        this.titleBarHeight = titleBarHeight || 40; // 标题栏高度 支付宝通过API获取，微信固定44px
        this.isAlipay = app === "alipay";
    },
};
</script>
<style scoped lang="less">
.header-container {
    width: 100%;
    flex: none;
    .status-bar {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
    }
    .title-bar {
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
    }
}
</style>
